<template>
    <div>
        <el-card class="mb">
            <el-input placeholder="请输入标题" v-model="queryform.patentTitle"
                style="width: 200px;margin-right: 10px;"></el-input>
            <el-select v-model="queryform.patentType" style="margin-right: 10px;">
                <el-option v-for="item in typelist" :value="item.dictValue" :label="item.dictLabel"></el-option>

            </el-select>
            <el-button type="primary" @click="search()" plain>查询</el-button>
            <el-button type="info" @click="research()" plain>重置</el-button>
            <el-button type="warning" @click="add()" style="float: right;" plain>发布</el-button>
        </el-card>
        <el-card>
            <div class="table">
                <el-table :data="tableData" strip>

                    <el-table-column type="index" width="100" label="序号" align="center" sortable></el-table-column>



                    <el-table-column prop="patentTitle" label="标题" width="200">
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.patentTitle">
                                <div style="width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                    {{ scope.row.patentTitle }}
                                </div>
                            </el-tooltip>
                        </template>
                    </el-table-column>

                    <el-table-column prop="coverImage" label="封面图片">
                        <template v-slot="scope">
                            <div style="display: flex; align-items: center">
                                <el-image style="width: 40px; height: 40px;" v-if="scope.row.cover"
                                    :src="scope.row.cover" :preview-src-list="[scope.row.cover]"></el-image>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="专利编号" align="center" prop="patentNumber">
                    </el-table-column>
                    <el-table-column label="专利类型" align="center" prop="patentType">
                    </el-table-column>
                    
                    <el-table-column label="发布时间" align="center" prop="createTime"></el-table-column>
                    <el-table-column label="审核状态" align="center" prop="state">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.state == '0' || scope.row.state == null">待审核</el-tag>
                            <el-tag v-if="scope.row.state == '1'" type="success">通过</el-tag>
                            <el-tag v-if="scope.row.state == '2'">驳回</el-tag>


                        </template>
                    </el-table-column>
                    <el-table-column label="下载量" align="center" prop="downloadCount"></el-table-column>
                    <el-table-column label="发布人" align="center" prop="createBy"></el-table-column>


                    <el-table-column label="操作" align="center" width="200" fixed="right">
                        <template v-slot="scope">
                            <!-- <el-button type="primary" plain size="mini"
                                @click="download(scope.row.id, scope.row.attachmentPath)"
                                style="margin-bottom: 10px;">下载附件</el-button> -->
                                <el-button size="mini" type="primary" plain @click="xiangqing(scope.row)">详情</el-button>
                     
                                <el-button size="mini" type="primary"
                                       v-if="scope.row.userId !== user.id && scope.row.state ==0 "
                                plain @click="shenhe(scope.row.id)">审核</el-button>
                            <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.current"
                        :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout="total, prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
            </div>

        </el-card>
        <el-dialog title="内容" :visible.sync="fromVisible1" width="40%" :close-on-click-modal="false" destroy-on-close>
            <div v-html="newscontent" style="width: 100%;overflow: auto;"></div>
        </el-dialog>
        <el-dialog title="审核" :visible.sync="fromVisible2" width="30%" :close-on-click-modal="false" destroy-on-close>
            <el-form :model="form2" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
                <el-form-item label="审核结果" prop="title">
                    <el-select v-model="form2.state" style="width: 100%;" placeholder="请选择">
                        <el-option v-for="item in shlist" :label="item.label" :value="item.value"></el-option>

                    </el-select>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="fromVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="save2">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="专利" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
            <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
                <el-form-item label="专利标题" prop="patentTitle">
                    <el-input placeholder="请输入标题" v-model="form.patentTitle"></el-input>
                </el-form-item>
                <el-form-item label="专利编号" prop="patentNumber">
                    <el-input placeholder="请输入编号" v-model="form.patentNumber"></el-input>
                </el-form-item>
            
                
                <el-form-item label="专利分类" prop="patentType">
                    <el-select v-model="form.patentType" style="width: 100%;" placeholder="请选择分类">
                        <el-option v-for="item in typelist" :value="item.dictValue" :label="item.dictLabel"></el-option>


                    </el-select>
                </el-form-item>
                <el-form-item label="专利封面" prop="cover">
                    <el-upload class="avatar-uploader" action="/oss" :headers="{ Authorization: 'Bearer ' + token }"
                        :show-file-list="false" :on-success="handleAvatarSuccess">
                        <img v-if="form.cover !== ''" :src="form.cover" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                </el-form-item>
                <el-form-item label="专利资源" prop="attachmentPath">
                    <el-upload action="/oss" :headers="{ Authorization: 'Bearer ' + token }" :file-list="fileList"
                        :show-file-list="true" :on-success="handleAvatarSuccess1">

                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>

                </el-form-item>
                <el-form-item label="文件内容" prop="name">
                    <div id="editor"></div>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="fromVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import service from '@/utils/request';
import { triggerRef } from 'vue';
import E from 'wangeditor';
export default {
    data() {
        return {
            fileList: [],
            shlist: [{
                label: "通过",
                value: 1


            }, {
                label: "驳回",
                value: 2


            },],
            tableData: [],  // 所有的数据
            current: 1,   // 当前的页码
            pageSize: 10,  // 每页显示的个数
            total: 0,
            editor: null,
            username: null,
            token: "",
            name: null,
            form2: {},
            fromVisible2: false,
            fromVisible: false,
            fromVisible1: false,
            newscontent: "",
            typelist: [],
            avatar: "",
            queryform: {

                current: 1,
                pageSize: 10
            },
            license: "",
            form: {
                avatar: "",
                license: ""
            },
            user: {},
            rules: {

                cname: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],

                // business_id: [
                //     { required: true, message: '请选择商家类型', trigger: 'blur' },
                // ]
            },
            ids: [],
            sjlist: [],
        }
    },
    mounted() {
        this.token = window.localStorage.getItem("token")
        this.user = JSON.parse(window.localStorage.getItem("userinfo"))
        this.getall()
        this.getlist()
    },
    methods: {
        xiangqing(row){
            this.$router.push({
                path:"/product/pinfo2",
                query:{
                    id:row.id
                }
            })
        },
        async download(id, f) {
            const res = await service.get("/achievement/download/" + id, { responseType: "blob" });
            console.log(res)
            window.location.href = f
        },
        djck(c) {
            this.fromVisible1 = true;
            this.newscontent = c
        },
        async getall() {
            const res = await service.get("/sys/dict/data/page?current=1&&pageSize=10000&&dictType=专利类型");
            console.log(res);
            if (res.code == 200) {
                this.typelist = res.data.records;

            }


        },
        initWangEditor(content) { //用户输入的文本作为参数传进函数。
            this.$nextTick(() => { //1.dom元素加载好后，先判断editor是否已经完成初始化，如果已经完成初始化，那么把editor销毁，清空。
                if (this.editor) {
                    this.editor.destroy();
                    this.editor = null;
                }
                this.editor = new E('#editor') //2.新建一个editor，赋值给我们一开始定义的editor，并渲染在iD为#editor的元素里
                this.editor.config.placeholder = '请输入内容' // 配置编辑器默认展示的文本
                this.editor.config.uploadFileName = 'file' //配置编辑器文件上传的名称
                this.editor.config.uploadImgServer = '/oss/editor'  //配置编辑器文件上传的接口
                this.editor.create() //执行创建编辑器
                console.log("12345")
                setTimeout(() => { //延时函数，这里没有设置延时时间，即为实时获取编辑器的文本给到this.editor.txt.html()。
                    this.editor.txt.html(content)
                })

            })
        },

        handleFileSuccess(e) {
            console.log(e)
            this.form.img = e.data

        },
        shenhe(id) {
            this.form2 = {
                id: id,
                state: ""
            }
            this.fromVisible2 = true
        },
        del(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await service.delete("/achievement/patentApplication/" + id)
                console.log(res)
                if (res.code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getlist()
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        force(e) {
            this.form.timeRange = e;
            this.$forceUpdate();
        },
        handleEdit(row) {
            this.form = row;
            this.fileList = []
            this.fileList.push({
                name: "图片",
                url: row.attachmentPath
            })
            this.fromVisible = true
            setTimeout(() => {
                this.initWangEditor(row.content)

            }, 3000)
        },
        search() {
            this.queryform.current = 1;
            this.queryform.pageSize = 10;
            this.getlist()
        },
        research() {
            delete this.queryform.patentTitle
            delete this.queryform.patentType
            this.queryform.current = 1;
            this.queryform.pageSize = 10;
            this.getlist()

        },
        async getlist() {

            const res = await service.get("/achievement/patentApplication/page", { params: this.queryform });
            console.log(res);
            if (res.code == 200) {
                this.tableData = res.data.records;
                this.total = res.data.total;
            }


        },
        add() {
            this.avatar = ""
            this.license = "";
            this.form = {
                cover: "",
                patentAttachment: ""

            }
            setTimeout(() => {
                this.initWangEditor("")

            }, 3000)
            this.fromVisible = true

        },
        handleLicenseSuccess(e) {

        },
        async save2() {
            const res = await service.post("/achievement/patentApplication/audit", this.form2);
            if (res.code == 200) {
                this.fromVisible2 = false
                this.$message.success("操作成功")
                this.getlist()
            }

        },
        async save() {
            this.form.content = this.editor.txt.html()
            this.form.userId = this.user.id
            this.form.state = 1
            if (!this.form.id) {
                const res = await service.post("/achievement/patentApplication", this.form);
                if (res.code == 200) {
                    this.fromVisible = false
                    this.$message.success("操作成功")
                    this.getlist()
                }
            } else {
                const res = await service.put("/achievement/patentApplication", this.form);
                if (res.code == 200) {
                    this.fromVisible = false
                    this.$message.success("操作成功")
                    this.getlist()
                }
            }




        },
        handleCurrentChange(e) {
            this.queryform.current = e;
            this.getlist()
        },
        handleAvatarSuccess(e) {
            console.log(e)
          
            this.form.cover = e.data;
            console.log(this.form.cover)
        },

        handleAvatarSuccess1(e) {

            this.form.patentAttachment = e.data;
        }
    }
}
</script>
<style scoped>
.mb {
    margin-bottom: 10px;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px !important;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
